import React, { useEffect, useRef } from "react";
import { Image } from 'react-vant'; // 引入 Image 组件
import Typed from "typed.js";

const Deepseek: React.FC<{ message: string | React.ReactElement }> = ({ message }) => {
  const styles = {
    container: {
      padding: "10px 20px",
      backgroundColor: "#f0f0f0",
      borderRadius: "10px",
      alignSelf: "flex-start" as const,
      fontSize: "16px",
      color: "#333",
      display: "flex",
      alignItems: "center",
      gap: "10px", // 新增 gap
    },
    avatar: {
      alignSelf: "flex-start" as const,
      width: "40px",
      height: "40px",
      flexShrink: 0, // 防止被挤压
    },
  };

  const typedRef = useRef(null);

  useEffect(() => {
    if(typeof message === 'string'){
      const typed = new Typed(typedRef.current, {
        strings: [message], // 要显示的文本
        typeSpeed: 50, // 输入速度
        backSpeed: 50, // 删除速度
        loop: false, // 是否循环
        showCursor: false, // 是否显示光标
      });
      return () => {
        typed.destroy(); // 销毁 Typed 实例
      }
    }
  }, [message])

  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: "10px" }}>
      <Image round width="40px" height="40px" src="https://img.yzcdn.cn/vant/cat.jpeg" style={styles.avatar} />
      <div className="Deepseek" ref={typedRef} style={styles.container}>
        {
          typeof message === 'string' ? message : React.cloneElement(message)
        }
      </div>
    </div>
  );
};

export default Deepseek;